<template>
  <div class="login-register">
    <div class="contain">
      <div class="big-box" :class="{ active: isRegister }">
        <div class="big-contain">
          <div class="btitle">广软项目申报系统</div>
          <!-- 学号、姓名、系别、专业、电话、邮箱、年级 -->
          <el-form
              ref="registerFormRef"
              :model="registerForm"
              :rules="registerFormRules"
              :hide-required-asterisk="true"
              status-icon
              label-width="80px"
              style="margin: auto"
          >

            <el-form-item label="学号" prop="no">
              <el-input v-model.number="registerForm.no">
                <template #prefix>
                  <el-icon class="el-input__icon">
                    <collection-tag/>
                  </el-icon>
                </template>
              </el-input>
            </el-form-item>

            <el-form-item label="姓名" prop="username">
              <el-input v-model="registerForm.username">
                <template #prefix>
                  <el-icon class="el-input__icon">
                    <user/>
                  </el-icon>
                </template>
              </el-input>
            </el-form-item>

            <el-form-item label="系别" prop="major">
              <el-cascader ref="majors" v-model="registerForm.major" :options="options" clearable placeholder="请选择您的系别"/>
            </el-form-item>

            <el-form-item label="电话" prop="tel">
              <el-input v-model="registerForm.tel">
                <template #prefix>
                  <el-icon class="el-input__icon">
                    <phone/>
                  </el-icon>
                </template>
              </el-input>
            </el-form-item>

            <el-form-item label="邮箱" prop="email">
              <el-input v-model="registerForm.email">
                <template #prefix>
                  <el-icon class="el-input__icon">
                    <message/>
                  </el-icon>
                </template>
              </el-input>
            </el-form-item>

            <el-form-item label="年级" prop="role">
              <el-select v-model="registerForm.role" placeholder="请选择您的年级">
                <el-option label="2021" value="2021"/>
                <el-option label="2020" value="2020"/>
                <el-option label="2019" value="2019"/>
                <el-option label="2018" value="2018"/>
              </el-select>
            </el-form-item>

            <el-form-item label="密码" prop="userpwd">
              <el-input type="password" show-password v-model="registerForm.userpwd">
                <template #prefix>
                  <el-icon class="el-input__icon">
                    <lock/>
                  </el-icon>
                </template>
              </el-input>
            </el-form-item>

            <el-form-item label="确认密码" prop="surepwd">
              <el-input type="password" show-password v-model="registerForm.surepwd">
                <template #prefix>
                  <el-icon class="el-input__icon">
                    <lock/>
                  </el-icon>
                </template>
              </el-input>
            </el-form-item>

            <el-form-item class="btns">
              <el-button color="#2b333e" @click="submit" style="color: white">注册</el-button>
              <el-button color="#2b333e" @click="clear" plain>清空</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import {Message, Phone} from "@element-plus/icons-vue";

export default {
  name: "register",
  components: {Message, Phone},
  data() {
    //手机号码验证
    var checkPhone = (rule, value, callback) => {
      const phoneReg = /^1[3|4|5|7|8][0-9]{9}$/
      if (!value) {
        return callback(new Error('电话号码不能为空'))
      }
      setTimeout(() => {
        if (!Number.isInteger(+value)) {
          callback(new Error('请输入数字值'))
        } else {
          if (phoneReg.test(value)) {
            callback()
          } else {
            callback(new Error('电话号码格式不正确'))
          }
        }
      }, 100)
    }
    //邮箱验证
    var checkEmail = (rule, value, callback) => {
      const mailReg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/
      if (!value) {
        return callback(new Error('邮箱不能为空'))
      }
      setTimeout(() => {
        if (mailReg.test(value)) {
          callback()
        } else {
          callback(new Error('请输入正确的邮箱格式'))
        }
      }, 100)
    }
    //密码的二次验证
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.registerForm.userpwd) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    return {
      isRegister: false,
      registerForm: {
        no: '',
        username: "",
        userpwd: "",
        tel: '',
        email: '',
        surepwd: "",
        major:'',
        role: "",
      },
      // 这是表单的验证规则对象
      registerFormRules: {
        // 验证学号是否合法
        no: [{required: true, message: "请输入学号", trigger: "blur"},
          {min:1000000000,max:9999999999,type: 'number', message: '请输入10位数字', trigger: 'blur'},
        ],
        // 验证用户名是否合法
        username: [
          {required: true, message: "请输入登录名称", trigger: "blur"},
          {
            min: 3,
            max: 10,
            message: "长度在 3 到 10 个字符",
            trigger: "blur",
          },
        ],
        // 验证密码是否合法
        userpwd: [
          {required: true, message: "请输入登录密码", trigger: "blur"},
          {
            min: 3,
            max: 15,
            message: "长度在 3 到 15 个字符",
            trigger: "blur",
          },
        ],
        tel: [{validator: checkPhone, trigger: 'blur'}],
        email: [{validator: checkEmail, trigger: 'blur'}],
        // 验证二次密码是否合法
        surepwd: [{validator: validatePass, trigger: 'blur'}],
        role: [{required: true, message: "请选择年级", trigger: 'change'}],
        major: [{type: 'array',required: true, message: "请选择系别", trigger: 'change'}]
      },
      options: [
        {
          //   软件工程系
          value: "ruanjiangongchengxi",
          label: "软件工程系",
          children: [
            {
              value: "ruanjianguojiban",
              label: "软件国际版",
            },
            {
              value: "dianziyujisuanjigongcheng",
              label: "电子与计算机工程",
            },
            {
              value: "hulianwangjinrongyingyongyukaifa",
              label: "互联网金融应用与开发",
            },
            {
              value: "rujiankaifafangxiang",
              label: "软件开发方向",
            },
            {
              value: "ruanjianceshijishufangxiang",
              label: "软件测试技术方向",
            },
            {
              value: "shujukexueyudashujujishu",
              label: "数据科学与大数据技术",
            },
          ],
        },
        // 网络技术系
        {
          value: "wangluojishuxi",
          label: "网络技术系",
          children: [
            {
              value: "wangluoyingyongkaifafangxiang",
              label: "网络应用开发方向",
            },
            {
              value: "",
              label: "信息资源管理方向",
            },
            {
              value: "",
              label: "云计算技术与应用方向",
            },
            {
              value: "",
              label: "信息系统开发方向",
            },
            {
              value: "",
              label: "网络完全技术方向",
            },
            {
              value: "",
              label: "网络技术与管理",
            },
          ],
        },
        // 电子
        {
          value: "",
          label: "电子系",
          children: [
            {
              value: "",
              label: "电工程专业",
            },
            {
              value: "",
              label: "通工程专业",
            },
            {
              value: "",
              label: "智能科学与技术专业",
            },
            {
              value: "",
              label: "自动化专业",
            },
          ],
        },

        // 数码系
        {
          value: "",
          label: "数码系",
          children: [{
            value: "",
            label: "环境设计专业",
          }, {
            value: "",
            label: "数字媒体艺术",
          },
            {
              value: "",
              label: "风景园林专业",
            },
            {
              value: "",
              label: "视觉传达专业",
            },
            {
              value: "",
              label: "产品设计",
            }]
        },
        // 计算机
        {
          value: "",
          label: "计算机系",
          children: [{
            value: "",
            label: "计算机科学与技术",
          }, {
            value: "",
            label: "物联网工程",
          }]
        },
        // 游戏系
        {
          value: "",
          label: "游戏系",
          children: [
            {
              value: "",
              label: "数字媒体技术",
            }, {
              value: "",
              label: "动画",
            }, {
              value: "",
              label: "网络与新媒体",
            },]
        },
        // 外语系
        {
          value: "",
          label: "外语系",
          children: [{
            value: "",
            label: "商务英语方向",
          }, {
            value: "",
            label: "翻译方向",
          }, {
            value: "",
            label: "商务日语",
          }]
        },
        // 管理系
        {
          value: "",
          label: "管理系",
          children: [
            {
              value: "",
              label: "行政管理",
            }, {
              value: "",
              label: "市场营销",
            }, {
              value: "",
              label: "人力资源管理",
            }, {
              value: "",
              label: "工商管理",
            }, , {
              value: "",
              label: "物流管理",
            },
          ]
        },
        // 财经系
        {
          value: "",
          label: "财经系",
          children: [{
            value: "",
            label: "国际经济与贸易",
          }, {
            value: "",
            label: "电子商务",
          }, {
            value: "",
            label: "财务管理",
          }, {
            value: "",
            label: "会计学",
          }]
        }
      ],
    };
  },
  methods: {
    //学生注册
    submit() {
      this.$refs.registerFormRef.validate(async (valid) => {
        if (valid) {
          axios.post('/students/reg', {
            no:this.registerForm.no,
            name: this.registerForm.username,
            pwd: this.registerForm.userpwd,
            tel: this.registerForm.tel,
            email: this.registerForm.email,
            major:this.$refs['majors'].getCheckedNodes()[0].pathLabels[0],
            role: this.registerForm.role,
          }).then(res => {
            let r = res.data
            if (r.flag === true) {
              alert(r.msg)
              this.$router.push('/')
            } else {
              alert(r.msg)
            }
          }).catch(err => {
            console.log(err)
          })
        }
      });
    },
    clear() {
      this.$refs.registerFormRef.resetFields()
    }
  },
};
</script>

<style scoped="scoped">
.login-register {
  background: url("../assets/img/html/rbg.jpg") no-repeat;
  background-size: 100% 100%;
}

.contain {
  width: 25%;
  height: 65%;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(255, 255, 255, 255);
  border-radius: 10%;
  text-align: center;
}

.big-box {
  width: 100%;
  height: 100%;
  margin: auto;
  transform: translateX(0%);
  transition: all 1s;
}

.btitle {
  height: 10%;
  font-size: 1.5em;
  font-weight: bold;
  padding: 18px 15px;
  background-image: linear-gradient(to right, #d7d2cc 0%, #304352 100%);
  -webkit-text-fill-color: transparent; /* 将字体设置成透明色 */
  -webkit-background-clip: text; /* 裁剪背景图，使文字作为裁剪区域向外裁剪 */
  -webkit-background-size: 200% 100%;
  -webkit-animation: masked-animation 4s linear infinite;
}

.small-box {
  width: 30%;
  height: 100%;
  background: #4762b0;
  position: absolute;
  top: 0;
  left: 0;
  transform: translateX(0%);
  transition: all 1s;
  border-top-left-radius: inherit;
  border-bottom-left-radius: inherit;
}

.small-contain {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.stitle {
  font-size: 1.5em;
  font-weight: bold;
  color: #fff;
}

.scontent {
  font-size: 0.8em;
  color: #fff;
  text-align: center;
  padding: 2em 4em;
  line-height: 1.7em;
}

.sbutton {
  width: 60%;
  height: 40px;
  border-radius: 24px;
  border: 1px solid #fff;
  outline: none;
  background-color: transparent;
  color: #fff;
  font-size: 0.9em;
  cursor: pointer;
}

.big-box.active {
  left: 0;
  transition: all 0.5s;
}

.small-box.active {
  left: 100%;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-top-right-radius: inherit;
  border-bottom-right-radius: inherit;
  transform: translateX(-100%);
  transition: all 1s;
}

@keyframes masked-animation {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -100% 0;
  }
}
</style>
